import {TypeClass} from "../TypeClass/TypeClass.js";

// 分类器类
function typeClassifier(cup) {
    this.coef = 1;
    // 大小自适应标志
    this.fitFlag = false;
    // 点击事件标志
    this.clickFlag = false;
    // 点击回调函数
    this.clickCallBack = null;
    // 类组件列表
    this.subComponentList = [];
    // 分类器类型
    this.classifierName = 0;

    // 获得容器
    this.cup = cup;
    if(!this.cup) return false;

    // 结构初始化
    this.__initStruct();

    // 获得组件
    this.TypeClassifier = this.cup.querySelector(".TypeClassifier");
    // 获得列表
    this.typeClassList = this.cup.querySelector(".typeClassList");
}

// 类别变量
typeClassifier.prototype.__classifierName = 0;

typeClassifier.prototype.__initStruct = function() {
    let templet = `
        <!-- 类分类器组件 -->
        <div class="TypeClassifier">
            <div class="typeClassList">

            </div>
            <div class="frontShadow"></div>
            <div class="backShadow"></div>
        </div>
    `;

    this.cup.innerHTML = templet;
    this.classifierName = typeClassifier.prototype.__classifierName ++;
}

// 大小自适应
typeClassifier.prototype.setSize = function(coef) {
    this.coef = coef || this.coef;
    this.fitFlag = true;

    this.subComponentList.forEach((subComponent) => {
        subComponent.setSize(this.coef);
    });
    this.TypeClassifier.style.setProperty("--controlLen", String(window.innerWidth * this.coef));
}

// 添加类别
typeClassifier.prototype.addTypeClass = function(infDict) {
    let subClassCup = document.createElement("div");
    subClassCup.className = "subClassCup";

    // 创建新类
    let newClass = TypeClass(subClassCup);
    newClass.setType(this.classifierName);
    newClass.setImg(infDict.img);
    newClass.setText(infDict.text);

    // 加入列表
    this.subComponentList.push(newClass);
    // 加入 dom
    this.typeClassList.appendChild(subClassCup);

    if(this.fitFlag)
        this.setSize();

    if(this.clickFlag) {
        let index = this.subComponentList.length - 1;
        this.__addSubClassListen(newClass, index);
    }
}

// 设置回调函数
typeClassifier.prototype.setClickCallBack = function(callBackFunc) {
    if(typeof callBackFunc !== "function")
        return false;
    this.clickCallBack = callBackFunc;
}

// 执行回应函数
typeClassifier.prototype.__runClickRespon = function(index, callBack) {
    if(typeof index !== "number" || this.subComponentList.length === 0)
        return false;

    if(index >= this.subComponentList.length)
        return false;

    // 设置为被选择状态
    this.subComponentList[index].getInput().checked = true;

    let subComponentWidth = this.subComponentList[0].getCup().offsetWidth;

    this.typeClassList.scrollTo({left: subComponentWidth * (index - 1), behavior: "smooth"});

    if(this.clickCallBack === null || !(callBack === true))
        return;
    this.clickCallBack(index);
}

// 添加监听器
typeClassifier.prototype.__addSubClassListen = function(subComponent, index) {
    let timeout = null;
    subComponent.getInput().addEventListener("click", () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            this.__runClickRespon(index, true);
        }, 0);
    });
}

// 启动监听
typeClassifier.prototype.addClickRespon = function() {
    this.clickFlag = true;

    this.subComponentList.forEach((subComponent, index) => {
        this.__addSubClassListen(subComponent, index);
    });
}

// 设置选中类
typeClassifier.prototype.setCheckedClass = function(index, callBack) {
    if(index >= this.subComponentList.length)
        return false;
    // callBack 判断使用回调函数
    this.__runClickRespon(index, callBack);
}

function createTypeClassifier(cup) {
    return new typeClassifier(cup || null);
}

export var TypeClassifier = createTypeClassifier;